<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->

      <page-tools :show-before="true">
        <!-- MARK 前面内容 -->
        <template v-slot:before
          >当前审批中 {{ info.currApproveCount }} 审批通过
          {{ info.approveCount }} 审批驳回 {{ info.rejectionCount }}</template
        >
      </page-tools>
      <!-- <ApprovalPageTool /> -->
      <el-card class="hr-block">
        <el-table
          :data="list"
          style="width: 100%; max-height: 450px; overflow-y: scroll"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!---  <el-table-column type="selection" width="30" />  --->
          <el-table-column type="index" width="80" label="序号" />
          <!-- <el-table-column prop="processName" label="审批类型" /> -->

          <el-table-column prop="processName" label="审批类型">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.processName === '3'"> 请假 </el-tag>
              <el-tag v-if="scope.row.processName === '4'" style="color: black">
                加班
              </el-tag>
              <el-tag v-if="scope.row.processName === '5'" style="color: grey">
                出差
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="username" label="申请人" />
          <el-table-column
            prop="procCurrNodeUserName"
            label="当前审批人"
            sortable
          />
          <el-table-column label="审批发起时间" sortable>
            <template slot-scope="scope">
              <span> {{ scope.row.procApplyTime }} </span>
              <!-- <span>{{ new Date().toLocaleString() }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="process_state" label="审批状态">
            <template slot-scope="scope">
              <!-- <span v-if="scope.row.processState === '0'" class="rovalsState">
                已提交
              </span> -->
              <span v-if="scope.row.processState === '1'" class="rovalsState">
                审批中
              </span>
              <span
                v-if="scope.row.processState === '2'"
                class="rovalsState"
                style="color: green"
              >
                审批通过
              </span>
              <span
                v-if="scope.row.processState === '3'"
                class="rovalsState"
                style="color: red"
              >
                驳回
              </span>
              <!-- <span v-if="scope.row.processState === '4'" class="rovalsState">
                <em class="revoke" />撤销
              </span> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="showDetail(scope.row)">
                查看
              </el-button>
              <!-- <el-button
                disabled
                type="text"
                size="mini"
                @click="OK(scope.row)"
              >
                通过
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!-- <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            :total="page.total"
            :page-size="page.pagesize"
            layout="prev, pager, next"
            @current-change="changePage"
          />
        </el-row> -->
      </el-card>
    </div>
    <!-- MARK 弹层 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="审批详情"
      width="45%"
      center
    >
      <el-steps
        v-if="currentRow"
        :active="Math.min(Number(currentRow.processState) + 1, 3)"
        simple
      >
        <el-step title="申请" icon="el-icon-edit"></el-step>
        <el-step title="审批中" icon="el-icon-upload"></el-step>
        <el-step title="审批结束" icon="el-icon-picture"></el-step>
      </el-steps>
      <div v-if="currentRow" class="approval-detail">
        <p>
          <strong>审批类型:</strong>
          <el-tag> {{ getProcessType(currentRow.processName) }}</el-tag>
        </p>
        <p><strong>申请人:</strong> {{ currentRow.username }}</p>
        <p>
          <strong>当前审批人:</strong> {{ currentRow.procCurrNodeUserName }}
        </p>
        <p><strong>审批发起时间:</strong> {{ currentRow.procApplyTime }}</p>
        <p>
          <strong>审批状态:</strong>
          {{ getProcessStateText(currentRow.processState) }}
        </p>
      </div>

      <!-- MARK popconfirm 官方文档没改 @onConfirm -->
      <span slot="footer" class="dialog-footer">
        <!-- <el-popconfirm
          title="确认通过该申请吗？"
          icon="el-icon-info"
          icon-color="blue"
          @onConfirm="process(currentRow, 2)"
        > -->
        <el-button
          v-if="currentRow && currentRow.processState == 1"
          type="primary"
          style="margin-right: 10px"
          slot="reference"
          @click="process(currentRow, 2)"
          >通过</el-button
        >
        <!-- </el-popconfirm> -->
        <el-button
          v-if="currentRow && currentRow.processState == 1"
          type="warning"
          style="margin-right: 10px"
          slot="reference"
          @click="process(currentRow, 3)"
          >驳回</el-button
        >
        <!-- <el-popconfirm
          title="确认驳回该申请吗？"
          icon="el-icon-warning"
          icon-color="orange"
          @onConfirm="process(currentRow, 3)"
        >
          <el-button
            v-if="currentRow && currentRow.processState == 1"
            type="warning"
            style="margin-right: 10px"
            slot="reference"
            >驳回</el-button
          >
        </el-popconfirm> -->

        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalList, process } from '@/api/approval'
import pageTools from './components/page-tools.vue'
import parseTime from '@/utils/parse-time.js'
export default {
  name: 'SocialTableIndex',
  components: { pageTools },
  data () {
    return {
      list: [],
      loading: false,
      page: {
        page: 1,
        total: 0,
        pageSize: 50
      },
      info: {
        currApproveCount: 0,
        approveCount: 0,
        rejectionCount: 0
      },
      dialogVisible: false, // 弹层可见状态
      currentRow: null // 当前选中的行数据
    }
  },
  created () {
    this.getApprovalList()
  },
  methods: {
    // 初始化数据
    async getApprovalList () {
      this.loading = true
      const { rows, total, currApproveCount, approveCount, rejectionCount } = await getApprovalList(this.page)
      this.page.total = total
      // 对 rows 中的每条数据的 procApplyTime 进行转换
      this.list = rows.map(row => {
        return {
          ...row,
          procApplyTime: parseTime(row.procApplyTime)
          // procApplyTime: row.procApplyTime
        }
      })
      // this.info.currApproveCount = currApproveCount
      // this.info.approveCount = approveCount
      // this.info.rejectionCount = rejectionCount
      this.info = {
        currApproveCount,
        approveCount,
        rejectionCount
      }
      this.loading = false
    },
    // 显示弹层
    showDetail (row) {
      this.currentRow = row // 设置当前行数据
      this.dialogVisible = true // 显示弹层
    },
    // 获取审批状态文本
    getProcessStateText (state) {
      switch (state) {
        case '1':
          return '审批中'
        case '2':
          return '审批通过'
        case '3':
          return '驳回'
        default:
          return '状态异常！'
      }
    },
    getProcessType (state) {
      // MARK 对应考勤状态
      switch (state) {
        case '3':
          return '请假'
        case '4':
          return '加班'
        case '5':
          return '出差'
        default:
          return '状态异常！'
      }
    },
    async process (row, state) {
      console.log(row, state)
      await process(row.processId, row.processName, row.procApplyTime, row.username, state)
      this.$message.success('处理成功！')
      this.getApprovalList()
      this.dialogVisible = false
    },
    changePage (newPage) {
      this.page.newPage = newPage
      this.getApprovalList()
    }
  }
}
</script>
<style scoped lang="scss">
.rovalsState {
  border: 1px solid skyblue;
  padding: 0.5em 1em;
  border-radius: 5px;
}
.approval-detail {
  padding: 20px;
  p {
    display: block;
    padding: 0.5em 2em 0.5em 1em;
    background: #befbff69;
    border-radius: 5px;
    border: 1px solid #0080899c;
  }
}
</style>
